<!DOCTYPE html>
<html>
    <head>
        <title>Pikujstree >> Test Canvas UI</title>
        <script>
            function getTries(name) {
                if (name.length > 11) {
                    return 20;
                }
                else if (name.length < 10 && name.length > 5) {
                    return (name.length * 2);
                }
                else {
                    return Math.floor(name.length * 2.5);
                }
            }
            function getFont(ctx, name, tries) {
                for (var i = 0; i < tries; i++) {
                    var fontc = "bold " + (i * 0.1) + "em sans-serif";
                    ctx.font = fontc;
                    var metric = ctx.measureText(name);
                    var widthf = metric.width;
                    if (widthf > 115) {
                        return font;
                    }
                    var font = fontc;
                }
            }
            function init() {
                canvas.height = 600;
                canvas.width = 975;
                drawCanvas();
            }
            function drawCanvas() {
                var name = nameinput.value;
                var sex = sexinput.value;
                var ctx = canvas.getContext('2d');
                var imageurl = "../pics/" + sex + "-avatar.png";
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.moveTo(110, 47);
                ctx.lineTo(350, 47);
                ctx.stroke();
                var fx = 110;
                var fy = 47;
                var mx = 350;
                var my = 47;
                drawStroke(ctx, fx, fy, 200, 138 + 25);
                drawStroke(ctx, mx, my, 200, 138 + 25);
                drawStroke(ctx, fx, fy, 500, 138 + 25);
                drawStroke(ctx, mx, my, 500, 138 + 25);
                drawPersonalBox(ctx, name, sex, imageurl, 10, 10);
                drawPersonalBox(ctx, name, sex, imageurl, 100, 125);
                drawPersonalBox(ctx, name, sex, imageurl, 250, 10);
                drawPersonalBox(ctx, name, sex, imageurl, 400, 125);
            }
            function drawStroke(ctx, initx, inity, endx, endy) {
                var ymidy = (endy + inity) / 2;
                ctx.beginPath();
                ctx.moveTo(initx, inity);
                ctx.lineTo(initx, ymidy);
                ctx.lineTo(endx, ymidy);
                ctx.lineTo(endx, endy);
                ctx.stroke();
            }
            function drawPersonalBox(ctx, name, sex, imageurl, x, y) {
                var width = 200;
                var height = 75;
                var border = 3;
                var tries = getTries(name);
                var imagewidth;
                var imageheight;
                var imagedownscaling = 2.6;

                var img = new Image();
                img.onload = function () {
                    imagewidth = img.width / imagedownscaling;
                    imageheight = img.height / imagedownscaling;
                    ctx.drawImage(img, x + border + 2, y + border + 2, imagewidth, imageheight);
                };
                img.src = imageurl;
                imagewidth = 70;

                ctx.beginPath();
                ctx.fillStyle = "#0000ff";
                ctx.fillRect(x, y, width, height);
                ctx.fillStyle = "#446688";
                ctx.fillRect(x + border, y + border, width - (border * 2), height - (border * 2));
                ctx.fillStyle = "#c2406f";
                ctx.font = getFont(ctx, name, tries);
                ctx.textAlign = "center";
                ctx.fillText(name, x + border + imagewidth + (((x + width - (border)) - (x + border + imagewidth)) / 2), y + border + 20, 125);
                ctx.fill();
            }
        </script>
    </head>
    <body onload="init();">
        <a href="/sign?type=new">Register</a>
            <br />
        <table>
            <tbody>
                <tr>
                    <td>
                        <canvas id="canvas" height="" width="" style="border:1px solid black"></canvas>
                    </td>
                    <td>
                        <input value="Mayank Jhawar" type="text" id="nameinput" />
                        <input value="Female" type="text" id="sexinput" />
                        <input value="Submit" type="button" onclick="drawCanvas();" />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>